<template>
  <div>
    <div v-if="flag == 0">
      <div class="mlt">
        <el-button
          v-permissions="{ permission: ['add:Reservation'] }"
          type="primary"
          @click="addReservationClisk"
        >
          新增排课
        </el-button>
        <el-button
          v-permissions="{ permission: ['add:Reservation'] }"
          type="primary"
          @click="leaveClisk"
        >
          批量请假
        </el-button>
        <el-button
          v-permissions="{ permission: ['add:Reservation'] }"
          type="primary"
          @click="recoveryClisk"
        >
          批量恢复请假
        </el-button>
        <div style="margin-top: 10px">
          <el-button type="primary" @click="lastWeek">上一周</el-button>
          <el-button type="primary" @click="ThisWeek">本周</el-button>
          <el-button type="primary" @click="nextWeek">下一周</el-button>
          <el-button type="primary" @click="switchs">切换</el-button>
          <el-date-picker
            v-model="forms.start_date"
            format="yyyy 第 WW 周"
            :picker-options="{ firstDayOfWeek: 1 }"
            placeholder="选择周"
            style="margin-left: 10px"
            type="week"
            value-format="yyyy-MM-dd "
            @change="pickerChange"
          />
        </div>
        <div style="margin-top: 15px; margin-bottom: 10px">
          <span style="margin-left: 15px; margin-right: 5px">
            {{ langs.page.user + '姓名' }}
          </span>
          <el-input
            v-model="forms.user_name"
            :placeholder="'请输入' + langs.page.user + '姓名'"
            style="width: 200px"
            @keyup.enter.native="init()"
          />
          <span style="margin-left: 15px">
            {{ langs.page.member + '姓名' }}
          </span>
          <el-input
            v-model="forms.customer_name"
            class="inputTop"
            :placeholder="'请输入' + langs.page.member + '姓名'"
            @keyup.enter.native="init()"
          />
          <span style="margin-left: 15px">课程名称</span>
          <el-input
            v-model="forms.course_name"
            class="inputTop"
            placeholder="请输入课程姓名"
            @keyup.enter.native="init()"
          />
          <el-button style="margin-left: 10px" type="primary" @click="init()">
            搜索
          </el-button>
          <el-button style="margin-left: 10px" type="primary" @click="Reset">
            重置
          </el-button>
        </div>
      </div>
      <div style="display: flex">
        <div
          v-for="(item, index) in sty"
          :key="index"
          style="text-align: center; display: flex; margin-left: 15px"
        >
          <div
            :class="item.key"
            style="width: 10px; height: 10px"
            :style="{ 'background-color': `${item.value}` }"
          ></div>
          <div style="font-size: 12px; margin-top: 8px; margin-left: 5px">
            {{ item.name }}
          </div>
        </div>
      </div>

      <div v-if="forms.type == 'date'" style="margin-top: 10px">
        <div class="table_wrap">
          <table>
            <thead>
              <tr>
                <th colspan="1">老师名称</th>
                <th v-for="(item, key) in course_date" :key="key" colspan="1">
                  {{ item.date }}
                  <br />
                  {{ course_week[item.week] }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(c, k) in list" :key="k">
                <td>{{ c.real_name }}</td>
                <td
                  v-for="(item, key) in course_date"
                  :key="key"
                  style="vertical-align: top"
                >
                  <div
                    v-for="(uc, uk) in c.course_date_list[item.date]"
                    :key="uk"
                    :class="uc.status"
                    :style="{ 'background-color': `${uc.status_color}` }"
                    @click="details(uc)"
                  >
                    <div>学生： {{ uc.customer_name }}</div>
                    <div>课程： {{ uc.goods_name }}</div>
                    <div>时间： {{ uc.course_time }}</div>
                    <div>状态： {{ uc.status_name }}</div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div v-if="forms.type == 'list'">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="日期" prop="course_date" />
          <el-table-column label="时间" prop="course_time" />
          <el-table-column label="老师" prop="real_name" />
          <el-table-column label="学生" prop="customer_name" />
          <el-table-column label="状态" prop="status_name" />
          <el-table-column label="操作" prop="status_name">
            <template slot-scope="scoped">
              <el-button type="text" @click="details(scoped.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- <div v-if="flag == 1">
      <AddCourse @showMain="showMain" />
    </div> -->
    <el-dialog
      :before-close="handleClose"
      title="详情"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div class="flexBox">
        <div class="dleBox">老师姓名：{{ detList.real_name }}</div>
        <div class="dleBox">学生姓名：{{ detList.customer_name }}</div>
        <div class="dleBox">课程：{{ detList.goods_name }}</div>
      </div>
      <div class="flexBox">
        <div class="dleBox">上课日期：{{ detList.course_date }}</div>
        <div class="dleBox">上课时间段：{{ detList.course_time }}</div>
        <div class="dleBox">状态：{{ detList.status_name }}</div>
      </div>
      <div class="flexBox">
        <div class="dleBox">课包：{{ detList.customer_card_name }}</div>
      </div>

      <el-dialog
        append-to-body
        :title="deltype"
        :visible.sync="innerVisible"
        width="50%"
      >
        <div v-if="delShow == 'adjust'">
          <Adjust :det-list="detList" @showBox="showBox" />
        </div>
        <div v-if="delShow == 'leave'">
          <span>是否推迟：</span>
          <el-radio-group v-model="radio">
            <el-radio label="Y">推迟</el-radio>
            <el-radio label="N">不推迟</el-radio>
          </el-radio-group>
          <div class="dleBox">
            原因：
            <br />
            <el-input
              v-model="textarea"
              placeholder="请输入请假原因"
              :rows="2"
              style="margin-top: 10px"
              type="textarea"
            />
            <div style="margin-top: 10px">
              <el-button type="primary" @click="leaveSbut">提交</el-button>
            </div>
          </div>
        </div>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="
            (detList.status == 'wait' && detList.course_date <= dateTime) ||
            (detList.status == 'adjuste' && detList.course_date <= dateTime)
          "
          v-permissions="{ permission: ['used:Reservation'] }"
          type="primary"
          @click="aClass"
        >
          上课
        </el-button>
        <el-button
          v-if="detList.status == 'wait' || detList.status == 'adjuste'"
          v-permissions="{ permission: ['adjustd:Reservation'] }"
          type="primary"
          @click="adjust"
        >
          调课
        </el-button>
        <el-button
          v-if="detList.status == 'wait' || detList.status == 'adjuste'"
          v-permissions="{ permission: ['edit:Reservation'] }"
          type="primary"
          @click="modifys"
        >
          修改
        </el-button>
        <el-button
          v-if="detList.status == 'wait' || detList.status == 'adjuste'"
          v-permissions="{ permission: ['exception:Reservation'] }"
          type="primary"
          @click="leave"
        >
          请假
        </el-button>
        <el-button
          v-if="detList.status == 'exception'"
          v-permissions="{ permission: ['recovery:Reservation'] }"
          type="primary"
          @click="recovery"
        >
          恢复
        </el-button>
        <el-button
          v-if="detList.status == 'wait' || detList.status == 'adjuste'"
          v-permissions="{ permission: ['pause:Reservation'] }"
          type="primary"
          @click="stop"
        >
          暂停
        </el-button>

        <el-button @click="clickDialog">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 新增排课 -->

    <el-dialog
      :before-close="handleClose"
      title="新增排课"
      :visible.sync="changeCourseDialogVisible"
      width="85%"
    >
      <div v-if="changeCourseDialogVisible == true">
        <AddCourse :modify="modify" @showMain="showMain" />
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="changeCourseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeCourseDialogVisible = false">
          确 定
        </el-button> -->
      </span>
    </el-dialog>
    <!-- 批量请假 -->
    <el-dialog
      :before-close="handleClose"
      title="批量请假"
      :visible.sync="leaveVisible"
      width="30%"
    >
      <el-date-picker
        v-model="leaveValue"
        end-placeholder="结束日期"
        :picker-options="{
          disabledDate(time) {
            // 设置禁用状态，参数为当前日期，要求返回 Boolean
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
          },
        }"
        range-separator="至"
        start-placeholder="开始日期"
        type="daterange"
        value-format="yyyy-MM-dd"
      />
      <el-input
        v-model="exception_explain"
        placeholder="请输入请假原因"
        :rows="2"
        style="margin-top: 10px"
        type="textarea"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="leaveVisible = false">取 消</el-button>
        <el-button type="primary" @click="leaveGo">请假</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :before-close="handleClose"
      title="批量恢复"
      :visible.sync="recoveryVisible"
      width="30%"
    >
      <el-date-picker
        v-model="recoveryValue"
        end-placeholder="结束日期"
        :picker-options="{
          disabledDate(time) {
            // 设置禁用状态，参数为当前日期，要求返回 Boolean
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
          },
        }"
        range-separator="至"
        start-placeholder="开始日期"
        type="daterange"
        value-format="yyyy-MM-dd"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="recoveryVisible = false">取 消</el-button>
        <el-button type="primary" @click="recoveryGo">恢复</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import AddCourse from './components/addCourse.vue'
  import Adjust from './components/adjust.vue'
  //
  import {
    course_scheduling_list,
    courseException,
    courseDetail,
    makeSingleCourseTask,
    courseFilter,
    cancelCourseException,
    coursePause,
    courseExceptionBatch,
    cancelCourseExceptionBatch,
  } from '@/api/reservation'
  export default {
    components: {
      AddCourse,
      Adjust,
    },
    data() {
      return {
        recoveryValue: '',
        exception_explain: '',
        leaveValue: '',
        leaveVisible: false,
        recoveryVisible: false,
        back: [{ a: '正常', b: 'faa500' }],
        pickerValue: '',
        // weekindex: 0, //日期 0 本周 -1 上一周 1 下一周
        flag: 0, //组件显示
        forms: {
          user_name: '',
          customer_name: '',
          course_name: '',
          type: 'date',
          weekindex: 0,
          start_date: '',
        }, // 搜索条件
        start_date: '',
        course_date: [], //储存日期
        course_week: [], //储存周几
        list: [], //储存数据
        detList: {}, //点击详情储存数据
        // type: 'date', //类型 date 日期 格式 list 列表格式
        dialogVisible: false, // 详情弹框显示隐藏
        innerVisible: false, // 详情弹框子级请假调课显示隐藏
        delShow: '', //显示隐藏 leave请假adjust调课
        deltype: '', // 标题
        textarea: '', //原因
        tableData: [], //lsit 数据
        loading: false,
        changeCourseDialogVisible: false, //新增排课
        modify: {},
        langs: JSON.parse(window.localStorage.getItem('lang')),
        sty: [
          { k: 'normal', n: '正常', a: '#faa500' },
          { k: 'exception', n: '请假', a: '#2ebdad' },
          { k: 'adjust', n: '调课' },
          { k: 'adjusted', n: '被调课' },
          { k: 'wait', n: '待划课' },
          { k: 'success', n: '已划课' },
          { k: 'cancel', n: '取消' },
        ],
        dateTime: '',
        radio: '',
      }
    },
    watch: {},
    mounted() {
      const date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let dateTime = y + '-' + m + '-' + d
      this.dateTime = dateTime
      this.init()
    },
    methods: {
      // 初始化方法
      init() {
        const data = {
          weekindex: this.forms.weekindex,
          type: this.forms.type,
        }
        if (data.type == 'list') {
          course_scheduling_list(this.forms).then((res) => {
            this.tableData = res.data
          })
        } else {
          course_scheduling_list(this.forms).then((res) => {
            this.loading = true
            this.list = res.data.list
            this.course_date = res.data.date
            this.course_week = res.data.week
          })
        }
        courseFilter().then((e) => {
          this.sty = e.data
          console.log(e.data)
        })
      },
      // 返回主页面方法
      showMain(e) {
        if (e == 0) {
          this.changeCourseDialogVisible = false
          this.innerVisible = false
        }
        this.init()
      },

      // 返回主页面方法
      showBox() {
        this.innerVisible = false
        this.dialogVisible = false
        this.init()
      },
      // 详情
      details(e) {
        this.detList = e
        this.dialogVisible = true
      },
      // 显示新增排课
      addReservationClisk() {
        this.modify = {}
        // this.flag = 1
        this.changeCourseDialogVisible = true
      },
      leaveClisk() {
        this.leaveVisible = true
        this.leaveValue = ''
        this.exception_explain = ''
      },
      recoveryGo() {
        const data = {
          start_date: this.recoveryValue[0],
          end_date: this.recoveryValue[1],
        }
        cancelCourseExceptionBatch(data).then(() => {
          this.recoveryVisible = false
          this.init()
        })
      },
      // recoveryValue,
      recoveryClisk() {
        this.recoveryVisible = true
        this.recoveryValue = ''
      },

      // 请假
      leave() {
        this.innerVisible = true
        this.delShow = 'leave'
        this.deltype = '请假'
      },
      //
      recovery() {
        this.$confirm('此状态已请假, 是否恢复?', '恢复', {
          confirmButtonText: '恢复',
          cancelButtonText: '取消',
          type: 'info',
        })
          .then(() => {
            const data = {
              id: this.detList.id,
              tag: this.detList.tag,
            }
            cancelCourseException(data).then(() => {
              this.dialogVisible = false

              this.init()
            })
            console.log(data)
            console.log(this.detList)
          })
          .catch(() => {
            console.log(this.back)
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除',
            // })
          })
      },
      stop() {
        this.$confirm('此操作会删除排课, 是否删除?', '删除', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'info',
        })
          .then(() => {
            const data = {
              id: this.detList.id,
            }
            coursePause(data).then(() => {
              this.init()
              this.dialogVisible = false
            })
          })
          .catch(() => {})
      },

      adjust() {
        this.innerVisible = true
        this.delShow = 'adjust'
        this.deltype = '调课'
      },
      modifys() {
        const pd = {
          customer_card_id: this.detList.customer_card_id,
          customer_id: this.detList.customer_id,
          tag: this.detList.tag,
        }
        courseDetail(pd).then((e) => {
          this.modify = e.data
          this.changeCourseDialogVisible = true
        })
      },
      // 上课
      aClass() {
        const data = {
          id: this.detList.id,
        }
        makeSingleCourseTask(data)
          .then(() => {
            this.$message({
              message: '开始上课',
              type: 'success',
            })
            this.init()
            this.dialogVisible = false
          })
          .catch(() => {
            this.$message.error('失败')
          })
      },
      // 请假提交
      leaveSbut() {
        const data = {
          id: this.detList.id,
          tag: this.detList.tag,
          exception_explain: this.textarea,
          is_delay: this.radio,
        }
        courseException(data)
          .then(() => {
            this.showBox()
            this.$message({
              message: '请假成功',
              type: 'success',
            })
            this.textarea = ''
          })
          .catch(() => {
            this.$message.error('失败')
          })
      },
      // 上周
      lastWeek() {
        this.forms.weekindex--
        this.init()
      },
      // 本周
      ThisWeek() {
        this.forms.weekindex = 0
        this.init()
      },
      // 下周
      nextWeek() {
        this.forms.weekindex++
        // this.forms.weekindex = 27
        this.init()
      },
      // 切换 date list
      switchs() {
        this.forms.weekindex = 0
        if (this.forms.type == 'date') {
          this.forms.type = 'list'
        } else {
          this.forms.type = 'date'
        }
        this.init()
      },
      // 日期搜索
      pickerChange() {
        if (this.forms.type == 'list') {
          course_scheduling_list(this.forms).then((res) => {
            this.tableData = res.data
          })
        } else {
          course_scheduling_list(this.forms).then((res) => {
            this.loading = true
            this.list = res.data.list
            this.course_date = res.data.date
            this.course_week = res.data.week
          })
        }
      },

      // 重置
      Reset() {
        this.forms.user_name = ''
        this.forms.customer_name = ''
        this.forms.course_name = ''
        this.forms.start_date = ''
        this.forms.type = 'date'
        this.forms.weekindex = 0
        this.init()
      },
      // 关闭弹框
      clickDialog() {
        this.dialogVisible = false
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
      leaveGo() {
        const data = {
          start_date: this.leaveValue[0],
          end_date: this.leaveValue[1],
          exception_explain: this.exception_explain,
        }
        courseExceptionBatch(data).then(() => {
          this.leaveVisible = false
          this.init()
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .flexBox {
    display: flex;
  }
  .dleBox {
    margin: 10px;
    font-size: 15px;
    // display: inline-flex;
  }
  .inputTop {
    width: 200px;
    margin-left: 10px;
  }
  .adjusted {
    //调课
    line-height: 30px;
    background: rgb(17, 192, 105);
    color: rgb(255, 255, 255);
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
  }
  .normal {
    //注册
    line-height: 30px;
    background: rgb(46, 189, 173);
    color: rgb(255, 255, 255);
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
  }
  .exception {
    //请假
    line-height: 30px;
    background: rgb(137, 143, 141);
    color: rgb(255, 255, 255);
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
  }
  .adjuste {
    //被调课
    line-height: 30px;
    background: rgb(46, 113, 189);
    color: rgb(255, 255, 255);
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
  }

  .success {
    //带划课
    line-height: 30px;
    background: #fff6e6;
    color: #fff;
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
  }

  .wait {
    //一划课成功
    line-height: 30px;
    background: rgb(236, 108, 4);
    color: rgb(255, 255, 255);
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
  }
  .pause {
    //取消
    line-height: 30px;
    background: rgb(128, 0, 241);
    color: rgb(255, 255, 255);
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
  }

  .table_wrap {
    width: 100%;
    height: 65vh;
    overflow: auto;
    margin: 20px 0 20px 10px;
    // border-bottom: 1px solid #61dafb;
  }
  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ededed;
  }

  td,
  th {
    text-align: center;
    width: 150px;
    box-sizing: border-box;
    // border-right: 1px solid red;
    border-right: 1px solid #e4e4e4;

    border-bottom: 1px solid #e4e4e4;
    /*超出长度...*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  thead tr th {
    position: sticky;
    top: 0;
    // background:#61dafb;
    background: #fff;
  }

  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    background: #fff;

    text-align: center;
  }
  th:first-child {
    z-index: 1; /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
    // background: pink;
  }
</style>
